<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            list-style: none;
        }
        ul{
            width: 1200px;
            margin:auto ;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        li {
            width: 23%;
            border: 1px solid #000;
            margin-bottom: 30px;
            text-align: center;
        }
        img{
            width: 100%;
        }

    </style>
</head>
<body>

    <ul id="a">
        <!-- <li>
            <img src="" alt="">
            <h3>redmi</h3>
            <p>容量大</p>
            <strong>999</strong>
        </li> -->
    </ul>

    <script>

        var data = [
            {
                imgSrc : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d764150a470174741d8b0b04515f7a78.jpg?thumb=1&w=150&h=150&f=webp&q=90' ,
                title : 'redmi' , 
                des : '容量大' ,
                price : '999' ,
            } ,
            {
                imgSrc : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/18d2099cb0b05bbd23cb1915dfc9d0d6.jpg?thumb=1&w=150&h=150&f=webp&q=90' ,
                title : 'k50' , 
                des : '2k直屏' ,
                price : '899' ,
            },
            {
                imgSrc : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d764150a470174741d8b0b04515f7a78.jpg?thumb=1&w=150&h=150&f=webp&q=90' ,
                title : 'redmi' , 
                des : '容量大' ,
                price : '999' ,
            } ,
            {
                imgSrc : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/18d2099cb0b05bbd23cb1915dfc9d0d6.jpg?thumb=1&w=150&h=150&f=webp&q=90' ,
                title : 'k50' , 
                des : '2k直屏' ,
                price : '899' ,
            },
            {
                imgSrc : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d764150a470174741d8b0b04515f7a78.jpg?thumb=1&w=150&h=150&f=webp&q=90' ,
                title : 'redmi' , 
                des : '容量大' ,
                price : '999' ,
            } ,
            {
                imgSrc : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/18d2099cb0b05bbd23cb1915dfc9d0d6.jpg?thumb=1&w=150&h=150&f=webp&q=90' ,
                title : 'k50' , 
                des : '2k直屏' ,
                price : '899' ,
            }
        ] ;

        var res = '' ;
        data.forEach(function(v) {
            // res += '<li>' ;
            // res += '<img src="' + v.imgSrc + '" alt="">' ;
            // res += '<h3>' + v.title + '</h3>' ;
            // res += '<p>' + v.des + '</p>' ;
            // res += '<strong>' + v.price + '</strong>' ;
            // res += '</li>' ;

            res += `
            <li>
                <img src="${v.imgSrc}" alt="">
                <h3>${v.title}</h3>
                <p>${v.des}</p>
                <strong>${v.price}</strong>
            </li>
            `
        })


        var oUl = document.getElementById('a') ;
        oUl.innerHTML = res ;



    </script>
    
</body>
</html>